<!-- 选择登录角色 -->
<template>
    <div class="roles">
        <div class='login-title clearfix'>
            <span>{{isReset ? '选择更改密码角色' : '选择登录角色'}}</span>
            <p>{{isReset ? '如果您是师生通账户，请联系您的老师或者管理员修改您的登录密码' : '勾选的是上次所选角色'}}</p>
        </div>
        <div class='role-body' ref="role-body">
             <ul class='role-list clearfix' :style="'width:'+listWidth+'px;'">
                <li class='role-li left' v-for="(item,index) in roleList" :key="index">
                    <div class="role-box" @click="choseRole(item,index)">
                        <span class="chose-icon" v-if="choseNum==index"></span>
                        <div class='head'>
                            <img :src="item.Avatar ? item.Avatar : $parent.headError" :onerror="$parent.headError">
                            <span :class="item.UserType==1?'t':''">{{item.UserType==1?'教':'学'}}</span>
                        </div>
                        <div class='name'>{{item.TrueName}}</div>
                        <div class='class'>{{item.UserClassRoom}}</div>
                        <div class='school'>{{item.SchoolName}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { axGet } from '@/api/index'

export default {
    name: "roles",
    data(){
        return{
            isReset:this.$route.query.isreset,      //找回密码流程
            roleList:JSON.parse(sessionStorage.getItem("rolesList")),  //角色列表
            listWidth:0,   //角色列表宽度
            choseNum:-1,   //当前选择
            lastUserId:localStorage.lastUserId,
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;

    },
    mounted(){
        /****** 验证登录 *****/
        if(!sessionStorage.getItem("rolesList")){
            this.$router.replace({path:'/',query: {}});
        }else{
            let liW=document.getElementsByClassName("role-li")[0].offsetWidth+1
            this.listWidth=this.roleList.length*liW
        } 
        this.$nextTick(()=>{
            if(this.lastUserId){
                let i=this.roleList.findIndex(item => item.UserId === this.lastUserId);
                this.choseNum=i
                this.$refs['role-body'].scrollLeft=165*i
                // setTimeout(()=>{
                //     this.choseRole(this.roleList[i],i)
                // },3000)
            }
        })
    },
    methods:{
        // 选角
        choseRole(item,index){
            this.choseNum=index;
            if(this.isReset==1){//找回密码
                this.$router.replace({path:'/reset',query: {userid:item.UserId,isbak:item.FromBak}});
            }else{//登录 
                this.$parent.myInfo=item;
                if(this.$parent.myInfo.ClassList.length>0){
                    this.getClassName(item)
                }else{
                    sessionStorage.setItem("myInfo",JSON.stringify(this.$parent.myInfo))
                    localStorage.setItem("lastUserId",item.UserId)
                    this.$router.replace({path:'/bookshelf',query: {}});
                }
            }
        },
        //获取班级
        getClassName(item){
            let classStr=''
            let classJson=[]
            this.$parent.myInfo.ClassList.forEach((code,i) => {
                classStr=classStr+','+code;
                let list={
                    code:code,
                    name:'',
                }
                classJson.push(list)
            });
            axGet('GetClassName', {
               ClassIds:classStr
            }).then(res => {
                if(res.ResultCode==1){
                    classJson.forEach((list,i) => {
                        list.name=res.Value[list.code]
                    });
                    this.$parent.myInfo.classJson=classJson
                
                    sessionStorage.setItem("myInfo",JSON.stringify(this.$parent.myInfo))
                    localStorage.setItem("lastUserId",item.UserId)
                    this.$router.replace({path:'/bookshelf',query: {}});
                }
            })
        },
    }
}
</script>